<template>
  <div id="finisheddetails">
    <!-- 顶部导航栏 -->
    <div style="position: fixed;top: 0;width: 100%;z-index:2000">
      <van-nav-bar class="navbar" @click-left="onClickLeft" @click-right="onClickRight">
        <template #left>
          <van-icon class="nav" name="cross"/>
        </template>
        <template #title>
          <div class="nav" @click="userClick">{{name}}</div>
        </template>
        <template #right>
          <span class="navRight">提交</span>
        </template>
      </van-nav-bar>
    </div>
    <div class="container">
      <!-- 对对方的评价 -->
      <textarea class="text" placeholder="写下你对他的评价吧(必填)" v-model="content"></textarea>
      <!-- 对对方的评分 -->
      <van-cell-group class="grade">
        <van-cell title="对他的评分" :value="grade * 2">
          <template #right-icon>
            <van-rate v-model="grade" allow-half void-icon="star" void-color="#eee"/>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  name: 'FinishedDetails',
  data () {
    return {
      grade: 5, // 评分 (这里满分是5，代表五颗星，操作数据时可以*2代表满分是10)
      content:'',
      name:''
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push('/home')
    },
    onClickRight() {
      if(!this.content){
         Toast('请填写评价内容');
      }else{
      let params = new URLSearchParams();
      params.append('id',Number(this.$route.query.id));
      params.append('mycontent',this.content);
      params.append('score',this.grade*2);
       this.axios({
          method: "post",
          url: this.$store.state.url+"/order/evaluation",
          headers:{
           'Authorization': localStorage.token
                },
            params
        }).then((res) => {
          if(res.data.message=="success"){
            this.$router.push('/home')
          }else{
            Toast(res.data.data.message);
            this.$router.push('/home');
          }
          
            console.log(res.data);
        }).catch((err) => {
            console.log(err);
        })
      }
    },
    userClick() {
      this.$router.push({
        name: 'user',
        params: {
          users: this.items.users
        }
      })
    },
  },
  created(){
    this.name=JSON.parse(window.localStorage.getItem('user')).name;
    console.log(JSON.parse(window.localStorage.getItem('user')));
     this.axios({
          method: "get",
          url: this.$store.state.url+"/order/"+this.$route.query.id,
      }).then((res) => {
        console.log(res.data.data);
        if(res.data.data.receiving_user.name==this.name){
          if(res.data.data.order_evaluation){
            Toast('您已经评价过了');
            this.$router.push('/');
          }
        }else if(res.data.data.users.name==this.name){
           if(res.data.data.user_evaluation){
            Toast('您已经评价过了');
            this.$router.push('/');
          }
        }
      }).catch((err) => {
          console.log(err);
      })
  }
}
</script>

<style scoped>
  .navbar {
    background: #66cd99;
    box-shadow: 0 0px 5px #9ad5a7;
    color: #9ad5a7;
  }
  .nav {
    color: #fff;
    font-size: 20px
  }
  .navRight {
    color: #fff;
    font-size: 20px;
    font-weight: 510
  }
  .container {
    padding-top: 37px;
  }
  .text {
    box-sizing: border-box;
    width: 100%;
    height: 300px;
    resize: none;
    padding: 10px;
    font-size: 18px;
  }
  .grade {
    border-top: 5px solid #66cd99;
    border-bottom: 5px solid #66cd99
  }
</style>